<template>
  <div class="page-sheet" :class="this.propsData.pageType" :contenteditable="contenteditable">
    <PageHeader v-if="!container">
      <template v-slot:page-number>
        <div class="page-number" data-total="1"></div>
      </template>
    </PageHeader>
    <div class="page-body" :contenteditable="contenteditable">
      <template v-if="blockList.length">
        <component
          v-for="item of blockList"
          :is="getComponentName(item)"
          :contenteditable="contenteditable"
          :isTitle="item.dataType === propsData.pageType"
          :key="item.blockId"
          :blockData="item"
          :container="container"
        />
      </template>
      <p v-if="!restBlockList.length" data-type="paragraph" :data-id="dataId" :data-block-id="blockId">
        <br data-mce-bogus="1" />
      </p>
    </div>
    <Footnote :footnotes="footnotes" />
    <PageFooter v-if="!container" />
  </div>
</template>
<script>
import PageHeader from '../PageHeader.vue'
import PageFooter from '../PageFooter.vue'
import Paragraph from '../blocks/Paragraph.vue'
import EditorTable from '../blocks/Table.vue'
import EditorFigure from '../blocks/Figure.vue'
import EditorFormula from '../blocks/Formula.vue'
import Example from '../blocks/Example.vue'
import NakedFigure from '../blocks/NakedFigure.vue'
import ItemNote from '../blocks/ItemNote.vue'
import Endline from '../blocks/Endline.vue'
import ItemList from '../blocks/ItemList.vue'
import TermBlock from '../blocks/TermBlock.vue'
import BlockGroup from '../blocks/BlockGroup.vue'
import { getComponentName, groupBlockList } from '@/utils/helpers'
import Footnote from '../Footnote.vue'
import { v4 as uuid } from 'uuid'
import { pagePrototypes, pageTypes } from '@/constants/structure'

export default {
  components: {
    PageHeader,
    PageFooter,
    Footnote,
    EditorTable,
    EditorFigure,
    EditorFormula,
    Example,
    NakedFigure,
    ItemNote,
    Endline,
    BlockGroup,
    ItemList,
    TermBlock,
    Paragraph,
  },
  props: {
    container: {
      type: String,
      default: ''
    },
    contenteditable: {
      type: Boolean,
      default: true
    },
    propsData: {
      type: Object,
      default: () => ({})
    }
  },
  provide() {
    return {
      pageType: this.propsData.pageType
    }
  },
  data() {
    return {
      titleBlockList: [],
      dataId: uuid(),
      blockId: uuid()
    }
  },
  methods: {
    getComponentName
  },
  computed: {
    blockList() {
      return groupBlockList([...this.titleBlockList, ...this.restBlockList])
    },
    restBlockList() {
      return this.propsData.blockList.filter((i) => {
        if (i.blockId !== 'undefined') {
          console.warn('=== block id is undefined ===')
        }
        return !pageTypes.includes(i.pageType || i.dataType) && i.blockId !== 'undefined'
      })
    },
    footnotes() {
      // 条文脚注
      let footnotes = []
      this.propsData.blockList?.forEach((blockData) => {
        if (blockData.dataType === 'paragraph') {
          blockData.textData?.contentList?.forEach?.((node, i) => {
            if (node.contentType === 'footnote') {
              footnotes.push({
                ...node
              })
            }
          })
        }
      })
      return footnotes
    }
  },
  mounted() {
    const pageTypes = ['foreword', 'introduction', 'reference', 'index', 'indexEn']
    if (pageTypes.some((type) => this.propsData.pageType === type)) {
      let blockZh = this.propsData.blockList.find((item) => {
        if (item.dataType === 'index') {
          const firstContent = item.textData.contentList[0]
          firstContent.content = '中文索引'
          firstContent.fullContent = '中文索引'
        }
        return item.dataType === this.propsData.pageType && item.textData.dataLang !== 'en'
      })
      if (!blockZh) {
        const titleZh = pagePrototypes.find((i) => i.pageType === this.propsData.pageType)?.label
        // 中文
        blockZh = {
          blockId: uuid(),
          dataType: this.propsData.pageType,
          textData: {
            contentList: [
              {
                content: titleZh,
                fullContent: titleZh
              }
            ],
            dataId: uuid()
          }
        }
      }
      this.titleBlockList.push(blockZh)

      if (this.$store.getters.languageType === 'both') {
        let blockEn = this.propsData.blockList.find(
          (item) => item.dataType === this.propsData.pageType && item.textData.dataLang == 'en'
        )
        if (!blockEn) {
          const titleEn = pagePrototypes.find((i) => i.pageType === this.propsData.pageType)?.labelEn
          // 英文
          blockEn = {
            blockId: uuid(),
            dataType: this.propsData.pageType,
            textData: {
              dataLang: 'en',
              contentList: [
                {
                  content: titleEn,
                  fullContent: titleEn
                }
              ],
              dataId: uuid()
            }
          }
        }
        this.titleBlockList.push(blockEn)
      }
    }
  }
}
</script>
